<template>
  <div v-loading="loading">
    <div v-if="showDownloadFile" class="file-system-upload">
      <el-upload
        action="/home-page/knowledge_base/uploadFile"
        :show-file-list="false"
        :http-request="httpRequest"
        accept=".doc, .docx, .pptx, .pdf, .jpg, .png, .txt, .psd, .ai, .xlsx, .xls, .mp4, .mov"
      >
        <el-button type="primary"> 上传文件 </el-button>
        <div></div>
      </el-upload>
      <span>
        上传文件类型：DOCX,DOC,PPTX,PDF,JPG,PNG,TXT,PSD,AI,XLSX,XLS、MP4、mov。文件大小100M以内。
      </span>
    </div>
    <TableSearch
      ref="table"
      :tableBtns="tableBtns"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
    </TableSearch>
  </div>
</template>

<script>
import TableSearch from '@/components/TableSearch'
import { deleteFile, selectFilePageList } from '@/api/fileSystem'
import http from '@/utils/http'
export default {
  name: 'FileSystem',
  components: { TableSearch },
  watch: {},
  data() {
    return {
      uploadFiles: undefined,
      tableBtns: [],
      searchPath: '',
      formItemsInline: [],
      columns: [
        {
          label: '文件名称',
          prop: 'fileName',
          resourceId: '/web/home-page/knowledge_base/文件名称',
        },
        {
          label: '操作',
          // resourceId: '',
          buttons: [
            {
              label: '下载',
              loading: (row) => row.loading,
              click: (row) => {
                this.$set(row, 'loading', true)
                http
                  .request({
                    method: 'post',
                    url: '/home-page/knowledge_base/downLoadFile',
                    responseType: 'blob',
                    data: {
                      fileId: row.fileId,
                      fileName: row.fileName,
                    },
                  })
                  .then((res) => {
                    let reader = new FileReader()
                    this.$set(row, 'loading', false)
                    reader.onload = function (e) {
                      let a = document.createElement('a')
                      a.download = row.fileName
                      a.href = e.target.result
                      document.body.appendChild(a)
                      a.click()
                    }

                    reader.readAsDataURL(res)
                  })
                  .catch((err) => {
                    console.log(err)
                  })
              },
              resourceId: '/web/home-page/knowledge_base/下载',
            },
            {
              label: '删除',
              click: (row) => {
                this.$confirm(`你确定要删除文件${row.fileName}吗`, '删除文件', {
                  center: true,
                  customClass: 'tip-dialog__wrapper',
                }).then(() => {
                  this.loading = true
                  deleteFile({
                    fileId: row.fileId,
                    fileName: row.fileName,
                  })
                    .then(() => {
                      this.$message({
                        showClose: true,
                        message: '删除成功',
                      })

                      this.$refs.table.refreshTable()
                    })
                    .catch((err) => {
                      console.log(err)
                    })
                    .finally(() => {
                      this.loading = false
                    })
                })
              },
              resourceId: '/web/home-page/knowledge_base/删除',
            },
          ],
        },
      ],
      tableData: {},
      form: {},
      loading: false,
    }
  },
  computed: {
    showDownloadFile() {
      return this.$store.getters.resourceSet.includes(
        '/web/home-page/knowledge_base/上传文件'
      )
    },
  },
  methods: {
    httpRequest(request) {
      const { action, file } = request
      console.log(request)
      let formData = new FormData()
      formData.append('file', file)

      this.loading = true
      return http
        .request({
          method: 'post',
          url: action,
          data: formData,
        })
        .then(() => {
          this.$message({
            message: '上传成功',
            type: 'success',
            showClose: true,
          })

          this.$refs.table.refreshTable()
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleTableData(params) {
      this.loading = true
      selectFilePageList(params)
        .then((res) => {
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    reset() {},
  },
}
</script>
<style lang="scss" scoped>
.file-system-upload {
  display: flex;
  align-items: center;
  padding-bottom: 10px;

  span {
    color: red;
  }
}
</style>
